<!--
 * @Author: 刘金开 liujinkai@jiankeyan.com
 * @Date: 2023-07-11 22:44:11
 * @LastEditors: 刘金开 liujinkai@jiankeyan.com
 * @LastEditTime: 2023-07-25 18:08:18
 * @FilePath: \font\src\view\class.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div>
		<el-card class="boxCard" :body-style="{ padding: '10px 10px 5px' }" >
				<div class="title" >
		<div class="mt-4" style=" display: inline-block;">
		<el-input v-model="input3" 
    
      placeholder="请输入学生名称进行查询"
       :clearable="true" 
       :disabled="inputUnable"
        class="input-with-select"
         style="width: 500px; "  
					size="large">
			<!-- <template #prepend>
			<el-select v-model="select" :disabled="true" placeholder="请选择班级" size="large" clearable="true" style="width: 120px">
			
				<el-option v-for="(item, index) in filteredArray" :key="index" :label="item.label" :value="item.value"></el-option>
			</el-select>
			</template> -->
			<template #append>
			<el-button  type="primary"  :disabled="inputUnable" text @click="searchForStudent">
     
         <el-icon><Search /></el-icon>
        </el-button>
			<!-- <el-button class="button" size="large" text >Operation button</el-button> -->
			</template>
		</el-input>
		</div>
		<div style=" display: inline-block;">
		<!-- <el-button type="primary" class="button"  size="large" text @click="getSpecialList">全部</el-button> -->
		
		<el-button text type="primary" size="large" @click="addStudentClick">学生课次录入</el-button>
		
		<el-button 
    text 
    type="Warning"
     style="color: rgb(243, 6, 6);"
    size="large"
    @click="manyDelClick(arr)"
    >
     批量删除</el-button>
	


         
        <el-button text type="primary" size="large" @click="exportDownloadClick">导出下载</el-button>
        <el-button text type="success" class="iconBoxTwo"  
         size="large" @click="showSpecial">分专业查看</el-button>
        <el-button  class="iconBox" type="primary" text @click="refresh">
        <el-icon class="hoverIcon"><RefreshRight /></el-icon>
        </el-button>
		</div>
	</div>
	<!-- 表格 -->
	<div >
    <el-table
    v-show="showTable"
    id="tableId"
    :border="true"
  :data="dataList"
  style="width: 100%; "
  :max-height="maxHeight"
 :highlight-current-row="true"
 :row-style="{height: '30px'}"
  @selection-change="selectionChange"
 >
 <el-table-column type="selection" width="35" />
  <el-table-column type="index" width="50"   align="center" />
  <el-table-column fixed prop="id" label="学生课程id" width="50" v-if="false" />
  <el-table-column fixed prop="classID" label="班级id" width="50" v-if="false" />
  <el-table-column fixed prop="studentDataID" label="学生信息id" width="50" v-if="false" />
    <el-table-column prop="studentName" label="学生姓名" width="100"  align="center"  :show-overflow-tooltip="true"/>
    <el-table-column prop="className" label="所属班级"  align="center" width="120" />
    <el-table-column prop="totalCourses" label="课次总计"  align="center" width="100" />
    <el-table-column prop="notTakingCourses" label="剩余课次"  align="center" width="100" >
      <template  #default="scope">
              <div :style="{ color: scope.row.notTakingCourses <=10?'red':'black',fontSize:scope.row.notTakingCourses <=10?'20px':'14px'}">
                {{ scope.row.notTakingCourses }}
              </div>
            </template>
          </el-table-column>

    	<el-table-column prop="takenCourses" label="已上课次" width="100"  align="center" />
  <el-table-column prop="created_at" label="创建时间"  align="center" width="120" />
    <el-table-column prop="updated_at" label="更新时间"  align="center" width="140" />
    <el-table-column prop="note" label="备注" width="320"   align="center" :show-overflow-tooltip="true"/>
    <el-table-column fixed="right" label="操作" width="120"  align="center">
      <template   #default="scope">
        <el-button link type="primary" size="small" @click="editClick(scope)"
          >编辑</el-button
        >
        <el-button link type="danger" size="small" @click="handleDelete(scope.$index,scope)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>

      <!-- el-dialog 新增-->
	  <el-dialog 
  v-model="showAddPage" 
  title="学生课次录入" 
  :modal="false"
  width="60%" 
  draggable
   center>

   <el-form
   ref="ruleForms"
    :model="studentForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :inline="true"
    status-icon
  >
 
<!-- 新增内部学生名称表格popver -->
  <el-popover
    placement="right-end"
    :width="600"   
    :offset="10"
    :visible="visibleStudentTable"
    popper-class="popoverStyle"
    >
    

    <template #reference>
        <el-form-item label="学生姓名"  prop="studentName" >
      <el-input v-model="studentForm.studentName"  placeholder="请选择学生姓名 "  @click="focusStudentName"/>
    </el-form-item>
    </template>
    <el-scrollbar>
          <el-row type="flex" justify="center">
              <el-input v-model="input4" placeholder="请输入学生姓名进行查询" clearable="true"  class="input-with-select" style="width: 380px; "  
                >
            <!-- <template #prepend>
            <el-select v-model="select" placeholder="请选择专业" size="large" clearable="true" style="width: 120px">
            
              <el-option v-for="(item, index) in filteredArray" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
            </template> -->
            <template #append>
            <el-button  type="primary" text @click="searchStudent">
              <el-icon><Search /></el-icon>
              </el-button>
             
            <!-- <el-button class="button" size="large" text >Operation button</el-button> -->
            </template>
          </el-input>
          <el-button  type="primary" text @click="clearClass">
              清空输入
              </el-button>
          
          </el-row>
 
            
               
                  <el-table 
                       @row-dblclick="clickStudentAdd"
                      :data="studentDataTable"
                      >
                      <el-table-column fixed prop="id" label="学生id" width="50" v-if="false" />
                  <el-table-column prop="name" label="姓名" width="100"  align="center" :show-overflow-tooltip="true"/>
                  <el-table-column prop="sex" label="性别"  width="60" align="center" />
                  <el-table-column prop="age" label="年龄" width="60"  align="center" />
                  <el-table-column prop="telephone" label="家长电话"  align="center"  :show-overflow-tooltip="true"/>
                  <el-table-column prop="school" label="学校"  align="center" :show-overflow-tooltip="true" />
                  <el-table-column prop="status" header-align="center"  label="是否在读"   align="center" width="100">
                  <template #default="scope">
                    <el-tag type="success" v-if="scope.row.status === false">否</el-tag>
                    <el-tag type="success" v-else-if="scope.row.status === true">是</el-tag>
                  </template>
                </el-table-column>
                  </el-table>
                
                        <pagination   
                        :pageSize="pageStudent.pageSize"
                            
                            :pageTotal="allStudentNamePages"
                                @pageFunc="pageFunStudent">
                            </pagination>                           
                            <el-row type="flex" justify="center"   style="margin-top:10px ;">
                                        <el-button @click="cancelSelectStudent()">取消</el-button>
                                <el-button type="primary" @click="selectThisStudent()">
                                    确认
                                </el-button>
                           
                                </el-row>
                              </el-scrollbar>
    </el-popover>



    

    <el-form-item label="学生id"  prop="studentDataID"  v-if="false">
      <el-input v-model="studentForm.studentDataID"  placeholder="学生id " />
    </el-form-item>

    <el-form-item label="班级id"  prop="classID"  v-if="false">
      <el-input v-model="studentForm.classID"  placeholder="学生id " />
    </el-form-item> 


     
<!-- 新增内部班级名称表格popver -->
  <el-popover
    placement="right-end"
    :width="600"   
    :offset="10"
    :visible="visibleClassTable"
    popper-class="popoverStyle"
    >
    

    <template #reference>
      <el-form-item label="所属班级"  prop="className" >
      <el-input v-model="studentForm.className"  placeholder="请选择学生班级 " @click="showClass" />
    </el-form-item>

    </template>
    <el-scrollbar>
          <el-row type="flex" justify="center">
              <el-input v-model="input5" placeholder="请输入班级名称进行查询" :clearable="true"  class="input-with-select" style="width: 380px; "  
                >
            <!-- <template #prepend>
            <el-select v-model="select" placeholder="请选择专业" size="large" clearable="true" style="width: 120px">
            
              <el-option v-for="(item, index) in filteredArray" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
            </template> -->
            <template #append>
            <el-button  type="primary" text @click="searchClass">
              <el-icon><Search /></el-icon>
              </el-button>
             
            <!-- <el-button class="button" size="large" text >Operation button</el-button> -->
            </template>
          </el-input>
          <el-button  type="primary" text @click="clearClass">
            清空输入
              </el-button>
          
          </el-row>
                  <el-table 
                       @row-dblclick="clickClassAdd"
                      :data="classDataTable"
                      >
                      <el-table-column fixed prop="id" label="班级id" width="50" v-if="false" />
                      <el-table-column prop="name" label="班级名称" width="100"  align="center"  :show-overflow-tooltip="true"/>
                      <el-table-column prop="classTimeStart" label="开课时间"  align="center" width="120" />
                      <el-table-column prop="classTimeEnd" label="放学时间"  align="center" width="140" />
                        <el-table-column prop="specialityName" label="所属专业" width="100"  align="center" />
                        <el-table-column prop="enable" header-align="center"  label="正在开设"   align="center" width="100">
                        <template #default="scope">
                          <el-tag type="success" v-if="scope.row.enable === false">否</el-tag>
                          <el-tag type="success" v-else-if="scope.row.enable === true">是</el-tag>
                        </template>
                      </el-table-column>
                                    </el-table>
                
                        <pagination   
                        :pageSize="pageClass.pageSize"
                            
                            :pageTotal="allClassNamePages"
                                @pageFunc="pageFunClass">
                            </pagination>                           
                            <el-row type="flex" justify="center"   style="margin-top:10px ;">
                                        <el-button @click="cancelSelectClass()">取消</el-button>
                                <el-button type="primary" @click="selectThisClass()">
                                    确认
                                </el-button>
                           
                                </el-row>
                              </el-scrollbar>
    </el-popover>


   
    <el-form-item label="学生总课次"  prop="totalCourses" >
      <el-input v-model.number="studentForm.totalCourses"  placeholder="请输入学生所购买课次 " />
    </el-form-item>

    <el-form-item label="备注"  prop="note" >
            <el-input v-model="studentForm.note"  placeholder="可在此处添加备注信息哦"  />
            </el-form-item>

   

 
 
 <el-row type="flex" justify="center">
	   
    <el-form-item >
        <el-button @click="showAddPage=false">取消</el-button>
      <el-button type="primary" @click="submitForm()">
        确认
      </el-button>

    </el-form-item>
 </el-row>
  </el-form>

  

  </el-dialog>

<!-- 编辑 -->
<el-dialog 
  v-model="showEditPage" 
  title="编辑学生课程信息" 
  :modal="false"
  width="60%" 
  draggable
   center>

   <el-form
   ref="ruleForms"
    :model="editForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :inline="true"
    status-icon
  >
 
<!-- 编辑内部学生名称表格popver -->
  <el-popover
    placement="right-end"
    :width="600"   
    :offset="10"
    :visible="visibleStudentTableEdit"
    popper-class="popoverStyle"
    >


    <template #reference>
        <el-form-item label="学生姓名"  prop="studentName" >
      <el-input v-model="editForm.studentName"  placeholder="请选择学生姓名 "  @click="editStudentName"/>
    </el-form-item>
    </template>
    <el-scrollbar>
          <el-row type="flex" justify="center">
              <el-input v-model="input4" placeholder="请输入学生姓名进行查询" :clearable="true"  class="input-with-select" style="width: 380px; "  
                >
            <!-- <template #prepend>
            <el-select v-model="select" placeholder="请选择专业" size="large" clearable="true" style="width: 120px">
            
              <el-option v-for="(item, index) in filteredArray" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
            </template> -->
            <template #append>
            <el-button  type="primary" text @click="searchStudent">
              <el-icon><Search /></el-icon>
              </el-button>
             
            <!-- <el-button class="button" size="large" text >Operation button</el-button> -->
            </template>
          </el-input>
          <el-button  type="primary" text @click="clearStudent">
            清空输入
              </el-button>
          
          </el-row>
 
            
               
                  <el-table 
                       @row-dblclick="clickStudentEdit"
                      :data="studentDataTable"
                      >
                      <el-table-column fixed prop="id" label="学生id" width="50" v-if="false" />
                  <el-table-column prop="name" label="姓名" width="100"  align="center" :show-overflow-tooltip="true"/>
                  <el-table-column prop="sex" label="性别" width="70"  align="center" />
                  <el-table-column prop="age" label="年龄"  width="70" align="center" />
                  <el-table-column prop="telephone" label="家长电话"  width="120"  align="center"  :show-overflow-tooltip="true"/>
                  <el-table-column prop="school" label="学校" width="120" align="center" :show-overflow-tooltip="true" />
                  <el-table-column prop="status" header-align="center"  label="是否在读"   align="center" width="100">
                  <template #default="scope">
                    <el-tag type="success" v-if="scope.row.status === false">否</el-tag>
                    <el-tag type="success" v-else-if="scope.row.status === true">是</el-tag>
                  </template>
                </el-table-column>
                  </el-table>
                
                        <pagination   
                        :pageSize="pageStudent.pageSize"
                          
                            :pageTotal="allStudentNamePages"
                                @pageFunc="pageFunStudent">
                            </pagination>                           
                            <el-row type="flex" justify="center"   style="margin-top:10px ;">
                                        <el-button @click="cancelSelectStudent()">取消</el-button>
                                <el-button type="primary" @click="selectThisStudent()">
                                    确认
                                </el-button>
                           
                                </el-row>
                              </el-scrollbar>
    </el-popover>



    

    <el-form-item label="学生id"  prop="studentDataID"  v-if="false">
      <el-input v-model="editForm.studentDataID"  placeholder="学生id " />
    </el-form-item>

    <el-form-item label="班级id"  prop="classID"  v-if="false">
      <el-input v-model="editForm.classID"  placeholder="学生id " />
    </el-form-item> 


     
<!-- 编辑内部班级名称表格popver -->
  <el-popover
    placement="left-end"
    :width="600"   
    :offset="10"
    :visible="visibleClassTableEdit"
    popper-class="popoverStyle"
    >
    

    <template #reference>
      <el-form-item label="所属班级"  prop="className" >
      <el-input v-model="editForm.className"  placeholder="请选择学生班级 " @click="showEditClass" />
    </el-form-item>

    </template>
    <el-scrollbar>
          <el-row type="flex" justify="center">
              <el-input v-model="input5" placeholder="请输入班级名称进行查询" :clearable="true"  class="input-with-select" style="width: 380px; "  
                >
            <!-- <template #prepend>
            <el-select v-model="select" placeholder="请选择专业" size="large" clearable="true" style="width: 120px">
            
              <el-option v-for="(item, index) in filteredArray" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
            </template> -->
            <template #append>
            <el-button  type="primary" text @click="searchClass">
              <el-icon><Search /></el-icon>
              </el-button>
             
            <!-- <el-button class="button" size="large" text >Operation button</el-button> -->
            </template>
          </el-input>
          <el-button  type="primary" text @click="clearClass">
            清空输入
              </el-button>
          
          </el-row>
                  <el-table 
                       @row-dblclick="clickClassEdit"
                      :data="classDataTable"
                      >
                      <el-table-column fixed prop="id" label="班级id" width="50" v-if="false" />
                      <el-table-column prop="name" label="班级名称" width="100"  align="center"  :show-overflow-tooltip="true"/>
                      <el-table-column prop="classTimeStart" label="开课时间"  align="center"  :show-overflow-tooltip="true"/>
                      <el-table-column prop="classTimeEnd" label="放学时间"  align="center"  :show-overflow-tooltip="true"/>
                        <el-table-column prop="specialityName" label="所属专业" width="100"  align="center" />
                        <el-table-column prop="specialityName" label="所属专业" width="100"  align="center" />
                        <el-table-column prop="enable" header-align="center"  label="正在开设"   align="center" width="100">
                    <template #default="scope">
                      <el-tag type="success" v-if="scope.row.enable === false">否</el-tag>
                      <el-tag type="success" v-else-if="scope.row.enable === true">是</el-tag>
                    </template>
                  </el-table-column>
                                    </el-table>
                
                        <pagination   
                        :pageSize="pageClass.pageSize"
                          
                            :pageTotal="allClassNamePages"
                                @pageFunc="pageFunClass">
                            </pagination>                           
                            <el-row type="flex" justify="center"   style="margin-top:10px ;">
                                        <el-button @click="cancelSelectClass()">取消</el-button>
                                <el-button type="primary" @click="selectThisClass()">
                                    确认
                                </el-button>
                           
                                </el-row>
                              </el-scrollbar>
    </el-popover>


   
    <el-form-item label="学生总课次"  prop="totalCourses" >
      <el-input v-model.number="editForm.totalCourses"  placeholder="请输入学生所购买课次 " />
    </el-form-item>

    <el-form-item label="备注"  prop="note" >
            <el-input v-model="editForm.note"  placeholder="可在此处添加备注信息哦"  />
            </el-form-item>

    
   

 
           <div class="fontColor"> <span >  注：学生姓名只能从新录入，不能编辑</span></div>
 <el-row type="flex" justify="center">
	   
    <el-form-item >
        <el-button @click="showEditPage=false">取消</el-button>
      <el-button type="primary" @click="submitEditForm()">
        确认
      </el-button>

    </el-form-item>
 </el-row>
  </el-form>

  

  </el-dialog>

<div v-show="showTabs">

    <el-tabs  @tab-click="tabClick">
      <el-tab-pane 
      v-for="(item, index) in specialData"
                    :key="index"
                    :label="item.label"
                    :name="item.value"
                    lazy
                   
      >
      <el-tabs @tab-click="classClick">
    <el-tab-pane v-for="(item, index) in classDataTabs"
                    :key="index"
                    :label="item.label"
                    :name="item.name"
                    lazy>	
                    <div >
    <el-table
    id="tableId"
   :border="true"
  :data="dataList"
  style="width: 100%; height: 450px;"
 :highlight-current-row="true"
 :row-style="{height: '30px'}"
  @selection-change="selectionChange"
 >
 <el-table-column type="selection" width="35" />
  <el-table-column type="index" width="50"   align="center" />
  <el-table-column fixed prop="id" label="学生课程id" width="50" v-if="false" />
  <el-table-column fixed prop="classID" label="班级id" width="50" v-if="false" />
  <el-table-column fixed prop="studentDataID" label="学生信息id" width="50" v-if="false" />
    <el-table-column prop="studentName" label="学生姓名" width="100"  align="center"  :show-overflow-tooltip="true"/>
    <el-table-column prop="className" label="所属班级"  align="center" width="120" />
    <el-table-column prop="totalCourses" label="课次总计"  align="center" width="120" />
    <el-table-column prop="notTakingCourses" label="剩余课次"  align="center" width="140" >
      <template  #default="scope">
              <div :style="{ color: scope.row.notTakingCourses <=10?'red':'black',fontSize:scope.row.notTakingCourses <=10?'20px':'14px'}">
                {{ scope.row.notTakingCourses }}
              </div>
            </template>
          </el-table-column>
    	<el-table-column prop="takenCourses" label="已上课次" width="100"  align="center" />
      
  <el-table-column prop="created_at" label="创建时间"  align="center" width="120" />
    <el-table-column prop="updated_at" label="更新时间"  align="center" width="140" />
    <el-table-column prop="note" label="备注" width="500"   align="center" :show-overflow-tooltip="true"/>
    <el-table-column fixed="right" label="操作" width="120"  align="center">
      <template   #default="scope">
        <el-button link type="primary" size="small" @click="editClick(scope)"
          >编辑</el-button
        >
        <el-button link type="danger" size="small" @click="handleDelete(scope.$index,scope)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>

                  </el-tab-pane>
            
          </el-tabs>
    
    
    </el-tab-pane>
    </el-tabs>

</div>


  <!-- 分页器 -->
  <div class="pageNation">
			<pagination   
      :pageSize="pageResult.pageSize"
		:pageTotal="allPages"
			@pageFunc="pageFunc">
		</pagination>
		</div>
		</el-card>

	</div>
</template>

<script setup>
 import {getSpecialAll,addSpecial,editSpecial,deleteSpecial,getSpecialOne} from "../services/api/speciality.js";
 import {getClass,editClass,createClass,deleteClass,} from "../services/api/class.js";
 import {getCourse,createCourse,editCourse,deleteCourse} from "../services/api/course.js";
 import {getStudent,createStudent,editStudent,deleteStudent,getStudentAll} from "../services/api/student.js";
import {onMounted, reactive, ref, toRaw,nextTick ,watch, onBeforeMount,toRefs  } from "vue";
import {ElMessageBox, ElNotification } from 'element-plus'
import{ exportDownload}from '../utils/exportExcel'
import pagination from '../components/pageNation.vue'
import {  useRoute} from 'vue-router';
import {
    Message,
    Setting,
    Document,
    Memo,
    Reading,
    Star,
    User,
    Postcard,
    School,
    List,
    ElementPlus,
    Flag,
    Ticket,
    Platform,
    Expand, Fold,
    Search,
    RefreshRight
} from '@element-plus/icons-vue';

const list = ref()
const input3=ref('');
const input4=ref('');
const input5=ref('');
const dataList = ref([]);
const allPages=ref()
const showAddPage=ref(false);
const ruleForms = ref(null);  
const arr = ref([]);
const arrs = ref([]);
const select=ref()
const showEditPage=ref(false)
const  showSelectStudent=ref(false)
const studentDataTable=ref()
const classDataTable=ref()
const allStudentNamePages=ref()
const allClassNamePages=ref()
const visibleStudentTable=ref(false)
const visibleStudentTableEdit=ref(false)
const visibleClassTable=ref(false)

const visibleClassTableEdit=ref(false)
const studentForm=reactive(
  {
    studentDataID:0,
    studentName:'',
    classID:0,
    className:'',
    totalCourses:'',
    note:'',

  }
)
const pageResult = reactive({
        // 放置页码及相关数据
        page: 1, //当前页
        pageSize: 5, //每页条目数
        classID:0,
        studentDataID:0,
      });  

const pageStudent = reactive({
        // 放置页码及相关数据
        page: 1, //当前页
        pageSize: 10, //每页条目数

      }); 
       const pageClass = reactive({
        // 放置页码及相关数据
        page: 1, //当前页
        pageSize: 10, //每页条目数
        specialityID:0,
        name:'',
      }); 
      // 获取所有的专业id和名字所传参数
const specialIdAll = reactive({
        // 放置页码及相关数据
        page: 1, //当前页
        pageSize: 100, //每页条目数
      });
// 编辑表单绑定数据
      const editForm=reactive({
          id:'',
          studentDataID:0,
          studentName:'',
          classID:0,
          className:'',
          totalCourses:'',
          note:'',

        })
// const List=ref()
const filteredArray=ref()
// 导出表格名称
const excelName=ref('排课信息')
      // 表单验证
const rules = reactive({
      studentName: [
            { required: true, message: '请选择或输入学生姓名', trigger: 'blur' },
            { min: 2, max: 10, message: '学生姓名只能新增不能编辑', trigger: 'change' },
          ],
          className: [
            { required: true, message: '请选择或输入班级名称', trigger: 'blur' },
            { min: 2, max: 10, message: '长度2到10个字符', trigger: 'blur' },
          ],
    
          totalCourses: [
          {
            type: "number",
            required: true,
            message: "请输入学生总课次",
            trigger: "blur",
          },
        ],
          classTimeStart: [
            {
              type: 'date',
              required: true,
              message: 'Please pick a date',
              trigger: 'change',
            },
          ],
          classTimeEnd: [
            {
              type: 'date',
              required: true,
              message: 'Please pick a time',
              trigger: 'change',
            },
          ],
          specialityID:[
          {
              required: true,
              message: '请选择所属专业',
              trigger: 'change',
            },
          ]
        })
//  编辑学生课次
      const editClick = (scope) => {
       showEditPage.value=true 
        // Object.assign(editForm,scope.row) 
        editForm.id= scope.row.id
        editForm.studentDataID= scope.row.studentDataID
         editForm.studentName= scope.row.studentName
         editForm.totalCourses =scope.row.totalCourses
         editForm.classID =scope.row.classID
         editForm.className =scope.row.className
         editForm.note =scope.row.note
      };


// // 编辑确定
   const submitEditForm=()=>{    

    let params={
      id:editForm.id,
  studentDataID:editForm.studentDataID,
  classID:editForm.classID,
  totalCourses:editForm.totalCourses,
  note:editForm.note,
}

editCourse(params).then((res)=>{
            const { studentName } = toRefs(editForm); 
                              if(res.data.code === 200){
                                showEditPage.value=false
                                if(showTable.value==true){
                                  getCourseList();
                                      }else if(showTabs.value==true){
                                        getCourse(pageResultTab).then((res)=>{
                                      dataList.value = res.data.data.course;
                                      allPages.value= res.data.data.count
                                      }) 
                                      }
                                  nextTick(() => {
                                      ruleForms.value.resetFields();
                                                  });  
                                  ElNotification({
                                    title: 'Success',
                                    message: `${studentName.value}信息编辑成功`,
                                    type: 'success',
                                      })
                                    
                                     
                                     
                        }else{
                                    ElNotification({
                                      title: 'Error',
                                      message: `${studentName.value}信息编辑失败`,
                                      type: 'error',
                          })
                        }
                  })

       
      }
  // 学生课次录入弹窗
 const addStudentClick = () => {
        showAddPage.value=true
        
      };
    
// 获取班级列表接口调用
const getCourseList=async () => {
        const res = await getCourse(pageResult)
        dataList.value = res.data.data.course;
        allPages.value= res.data.data.count

      };
// 右上角刷新
const refresh=()=>{
   

  if(showTable.value==false){
    showTable.value=!showTable.value
  showTabs.value=!showTabs.value
 
  }
  getCourseList(); 

}
// 新增
     const submitForm= ()=>{
        ruleForms.value.validate((valid) => {
        if (valid) {
               let params={
  studentDataID:studentForm.studentDataID,
  classID:studentForm.classID,
  totalCourses:studentForm.totalCourses,
  note:studentForm.note,
}

          createCourse(params).then((res)=>{
          
            const { studentName } = toRefs(studentForm); 
                              if(res.data.code === 200){
                                  showAddPage.value=false
                                  nextTick(() => {
                                      ruleForms.value.resetFields();
                                                  });  
                                  ElNotification({
                                    title: 'Success',
                                    message: `学生${studentName.value}排课成功`,
                                    type: 'success',
                                      })
                                      getCourseList();
                                      classClickListAll();
                        }else{
                                    ElNotification({
                                      title: 'Error',
                                      message: `新增--${name.value}失败`,
                                      type: 'error',
                          })
                        }
                  })

        }})
      
      }
// 获取专业id和名称
      const specialData=ref()
      const getSpecialList = async () => {
        const res = await getSpecialAll(specialIdAll)
        list.value = res.data.data.specialities;
        specialData.value = list.value.map(obj => ({ value: obj.id, label: obj.name }));
      
        // filteredArray.value = list.value.map(obj => ({ value: obj.id, label: obj.name }));
        // filteredArray.value.unshift({value: 0,label:'班级查询' });
      };


      const handleDelete = (index,scope) =>{
            ElMessageBox.confirm(
                `确认删除?  >>> ${scope.row.studentName}`,
                'Warning',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
               
                     let id=scope.row.id
       let className=scope.row.studentName
       arr.value=[]
        arr.value=[...arr.value,id]
        deleteCourse(arr.value).then((res)=>{
        
            if(res.data.msg=='OK'){
             dataList.value.splice(index, 1)
             arr.value=[]
             ElNotification({
                                    title: 'Success',
                                    message: `成功删除--${className}`,
                                    type: 'success',
                                      })
            }else{
            ElNotification({
                                      title: 'Error',
                                      message: `删除--${className}失败`,
                                      type: 'error',
                          })
          }
           
        })
                    
                })
                .catch(() => {
                    ElNotification({
                        title: '撤销删除',
                        type: 'info',
                        message: 'deleted canceled',
                    })
                })
        }
// 批量删除拿到id
    const selectionChange=(selection)=>{
                    arrs.value=[] 
                let params = JSON.parse(JSON.stringify(selection));              
                        for( let i=0;i<params.length;i++ ){
                          arrs.value.push(params[i].id)
                        }
                        arr.value = [...new Set(arrs.value)];                               
      }
//  批量删除班级
          const manyDelClick=(val)=>{
            deleteCourse(val).then((res)=>{
            if(res.data.msg=='OK'){
              getCourseList();
             arrs.value=[]
             ElNotification({
                                    title: 'Success',
                                    message: '批量删除成功',
                                    type: 'success',
                                      })
            }
           
        })
      }
      const filteredObject =ref()
//          // 查询
const searchForStudent=()=>{
if(input3.value){


filteredObject.value = searchTableDate.value.filter((obj) =>
{
  // return obj.studentName === input3.value
  return obj.studentName.includes(input3.value);
}


)
dataList.value=filteredObject.value
allPages.value= filteredObject.value.length
console.log(filteredObject.value.length);
}else{
  getCourseList();
}

 
      }

// // 导出下载
const exportDownloadClick=( ()=>{
  pageResult.pageSize = allPages.value;

  getCourse(pageResult).then( async(res)=>{
  dataList.value = res.data.data.course;
  nextTick(() => {
    exportDownload(excelName.value,)
  });
})
})

watch(input3, (newValue) => {
      if (newValue === '') {
        getCourseList();
      }
    });

    watch(dataList, (newArr) => {
  newArr.forEach((obj) => {
    obj.created_at = obj.created_at.slice(0, 10);
    obj.updated_at = obj.updated_at.slice(0, 10);
  });
});
// 学生姓名选择分页
const pageFunStudent= (data) => {
    pageStudent.pageSize = data.pageSize;
    pageStudent.page = data.pageNum;
    getStudentList();  // 触发获取数据函数
};

const pageFunClass= (data) => {
  pageClass.pageSize = data.pageSize;
    pageClass.page = data.pageNum;
    getClassList();  // 触发获取数据函数
};
// 分页函数
const pageFunc = (data) => {
     
        pageResult.pageSize = data.pageSize;
        pageResult.page = data.pageNum;
        getCourseList();  // 触发获取数据函数
      };
//学生课次录入弹窗点击学生姓名选择弹窗
  const  searchStudent=()=>{
    let params={
         page: 1, //当前页
        pageSize: 10, //每页条目数
        name:input4.value
    }
    getStudentAll(params).then((res)=>{
      studentDataTable.value = res.data.data.studentData;
    })
  }
  watch(input4 , (newValue) => {
      if (newValue === '') {
        getStudentList()
      }
    });

  const clearStudent=()=>{
    input4.value=''
    getStudentList()
  }
  const clearClass=()=>{
    input5.value=''
    getClassList()
  }
  // 获取学生列表接口调用
const getStudentList=async () => {
        const res = await getStudent(pageStudent)
        studentDataTable.value = res.data.data.studentData;
        allStudentNamePages.value= res.data.data.count
      };

//   点击选择学生输入框弹出学生表格
 const focusStudentName=()=>{
        visibleStudentTable.value=!visibleStudentTable.value
      }
      const editStudentName=()=>{
        visibleStudentTableEdit.value=!visibleStudentTableEdit.value
      }
//   取消收回弹出学生表格
 const cancelSelectStudent=()=>{
        visibleStudentTable.value=false
        visibleStudentTableEdit.value=false
        studentForm.studentDataID=''
       studentForm.studentName=''
      }

watch(showAddPage, (newValue) => {
      if (newValue === false) {
        visibleStudentTable.value=false
        visibleClassTable.value=false
      }
    });          
 const selectThisStudent=()=>{
        visibleStudentTable.value=false
        visibleStudentTableEdit.value=false
      }

//     const studentForm=reactive(
//   {
//     studentDataID:0,
//     studentName:'',
//     classID:0,
//     className:'',
//     totalCourses:'',
//     note:'',

//   }
// )
const clickStudentAdd=(row)=>{
  const { name } = toRefs(row); 
 
  if(row.status){
    studentForm.studentDataID=row.id
    studentForm.studentName=row.name
  }else{
    ElNotification({
                                 title: 'Error',
                                 message: `请检查${name.value}在读状态`,
                                type: 'error',
                          })
  }
  
  
}
const clickStudentEdit=(row)=>{
  const { name } = toRefs(row); 

  if(row.status){
    editForm.studentDataID=row.id
    editForm.studentName=row.name
  }else{
    ElNotification({
                                 title: 'Error',
                                 message: `请检查${name.value}在读状态`,
                                type: 'error',
                          })
  }
  
  
}

const clickClassEdit=(row)=>{
  const { name } = toRefs(row); 
  if(row.enable){
    editForm.classID=row.id
    editForm.className=row.name
  }else{
    ElNotification({
                                 title: 'Error',
                                 message: `请检查${name.value}是否开课`,
                                type: 'error',
                          })
  }
  
  
  
}
const clickClassAdd=(row)=>{
  const { name } = toRefs(row); 
  if(row.enable){
    studentForm.classID=row.id
    studentForm.className=row.name
  }else{
    ElNotification({
                                 title: 'Error',
                                 message: `请检查${name.value}是否开课`,
                                type: 'error',
                          })
  }
  
  
  
}
// 班级
const showClass=()=>{
  visibleClassTable.value=!visibleClassTable.value
  getClassList()
}

const showEditClass=()=>{
  visibleClassTableEdit.value=!visibleClassTableEdit.value
  getClassList()
}
const getClassList=()=>{
  getClass(pageClass).then((res)=>{
        classDataTable.value = res.data.data.classes;
        allClassNamePages.value= res.data.data.count
})
}

watch(classDataTable, (newArr) => {
  newArr.forEach((obj) => {
    obj.classTimeStart = obj.classTimeStart.slice(11, 19);
    obj.classTimeEnd = obj.classTimeEnd.slice(11, 19);
  });
});

const cancelSelectClass=()=>{
  visibleClassTable.value=false
  visibleClassTableEdit.value=false
  input5.value=''
}

const selectThisClass=()=>{
  visibleClassTable.value=false
  visibleClassTableEdit.value=false
}
watch(input5 , (newValue) => {
      if (newValue === '') {
        getClassList()
      }
    });

const searchClass=()=>{
  let params={
         page: 1, //当前页
        pageSize: 10, //每页条目数
        name:input5.value,
        specialityID:0
    }
    getClass(params).then((res)=>{
      classDataTable.value = res.data.data.classes;
    })
}
const showTabs=ref(false)
const showTable=ref(true)
const  showSpecial=()=>{
  showTable.value=!showTable.value
  showTabs.value=!showTabs.value
}
const  inputUnable=ref(false)
watch(showTable , (newValue) => {
      if (newValue == true) {
        inputUnable.value=false
        getCourseList();
      }
    });
 watch(showTabs , (newValue) => {
      if (newValue == true) {
        inputUnable.value=true
        dataList.value=[]
               dataList.value=dataClassCurrent.value
               allPages.value= allPagesCurrent.value
        getSpecialList()
      }
    });

    const pageClassTab = reactive({
        // 放置页码及相关数据
        page: 1, //当前页
        pageSize: 500, //每页条目数
        specialityID:0,
        name:'',
      }); 


const classDataList=ref()
const classDataTabs=ref()
const  tabClick=( tab )=>{
  dataList.value=[]
pageClassTab.specialityID=tab.props.name

getClass(pageClassTab).then((res)=>{
    
  classDataList.value  = res.data.data.classes;
  classDataTabs.value = classDataList.value.map(obj => ({ name: obj.id, label: obj.name  }));

})

}

const pageResultTab = reactive({
        // 放置页码及相关数据
        page: 1, //当前页
        pageSize: 500, //每页条目数
        classID:0,
        studentDataID:0,
      }); 
const dataClassCurrent=ref([])
const allPagesCurrent=ref()
const classClick= async(tab)=>{
  pageResultTab.classID=tab.props.name
 getCourse(pageResultTab).then((res)=>{
dataList.value = res.data.data.course;
dataClassCurrent.value = res.data.data.course;
allPages.value= res.data.data.count
allPagesCurrent.value= res.data.data.count
 })       
}
const searchTableDate=ref()  
 const classClickListAll= async()=>{
 getCourse(pageResultTab).then((res)=>{
dataList.value = res.data.data.course;
searchTableDate.value = res.data.data.course;

allPages.value= res.data.data.count
 })   }  
const route = useRoute();
const maxHeight=ref()
onBeforeMount(()=>{
    getCourseList();
    classClickListAll();
    
  maxHeight.value=document.body.clientHeight - 155;

})
	  onMounted(()=>{
      
        getStudentList()
        showAddPage.value=route.query.showAddPage
})
</script>
<style >
.m-2{
width: 150px;
}

svg {
  width: 20px;
  height: 20px;

}

.iconBox{
  position: fixed;
  right: 10px;
  
}
.iconBoxTwo{
  position: fixed;
  right:70px;
  
}

.el-popover.popoverStyle{
  height: 600px ;
  overflow: auto ;
}
.fontColor{
  color: rgb(238, 9, 9);
}

</style>